<template>
  <div class="topbar">
    <div class="wrap">
      <div class="l">欢迎来到京东积分商城</div>
      <div class="r">
        <ul>
          <li @click="hdclick">
            <img src="@/assets/img/user.png" alt="" />
            用户名：游客
          </li>
          <li>我的积分：--</li>
          <li>获取积分</li>
          <li>叩丁狼官网</li>
          <li v-if="!isLogined" class="btn" @click="setIsShowLoginModal(true)">
            登录
          </li>
          <li v-else class="btn cart-btn">
            <img src="../assets/img/Cart.png" alt="" />
            <span>购物车</span>
            <b>{{ cartNums }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { useToast } from '../utils/index'
import { WeChatSubmitApi } from '../request/api'
export default {
  data () {
    return {
      cartNums: 0
    }
  },
  computed: {
    ...mapState({
      isLogined: state => state.loginStatus.isLogined
    })
  },
  methods: {
    // ...mapMutations("showLoginModal", { setIsShowLoginModal: "setIsShowLoginModal"})
    ...mapMutations({
      setIsShowLoginModal: 'showLoginModal/setIsShowLoginModal',
      setIsShowToast: 'toastStatus/setIsShowToast',
      setIsPhoneLogin: 'loginStatus/setIsPhoneLogin',
      setIsLogined: 'loginStatus/setIsLogined'
    }),
    hdclick () {
      useToast('请先登录', 'danger')
    }
  },
  watch: {
    '$route.query.code': {
      immediate: true,
      async handler (newValue, oldValue) {
        console.log(newValue)
        if (newValue) {
          let res = await WeChatSubmitApi({ code: newValue })
          if (res.code == 0) {
            console.log('微信扫码成功登陆')
            useToast('登陆成功', 'success')
            setTimeout(() => {
              this.setIsShowLoginModal(false)
              this.setIsLogined(true)
              localStorage.setItem('x-auth-token', res['x-auth-token'])
              this.$router.push(this.$route.path)
            }, 1500)
          }
          else if (res.code == 400) {
            useToast('code已经失效，请重新扫码登录', 'danger', 5000)
            this.setIsShowLoginModal(true)
            this.setIsPhoneLogin(false)
          }
          else if (res.code == 407) {
            useToast(res.message, 'warning', 5000)
            localStorage.setItem('uuid', res.uuid)
            this.setIsShowLoginModal(true)
            this.setIsPhoneLogin(true)
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url("../assets/css/global.less");
.topbar {
  height: 40px;
  background: #242b39;
  font-size: 14px;
  font-family: SourceHanSansSC;
  font-weight: 300;
  line-height: 40px;
  color: #fff;
  .wrap {
    height: 40px;
    display: flex;
    justify-content: space-between;
    ul {
      display: flex;
      li {
        margin-left: 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 26px;
          border-radius: 50%;
        }
        &.btn {
          width: 124px;
          height: 40px;
          background: @base-color;
          justify-content: center;
        }
        &.cart-btn {
          b {
            width: 22px;
            height: 22px;
            background: #fd604d;
            border-radius: 11px;
            line-height: 22px;
            text-align: center;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>